<template>
  <div class="container flex content scene">
    <div class="left">
      <Card>
        <el-page-header @back="goBack" title="返回" :content="page.title"/>
      </Card>
      <Card>
        <div class="article" v-html="page.contentRendered"></div>
      </Card>

      <Card title="评论" v-if="page.showComment">
        <Comment :targetType="2" :targetId="page.id" @login="$parent.$parent.showLogin()"></Comment>
      </Card>
    </div>
    <div class="right">
      <Right/>
    </div>
  </div>
</template>

<script>
import api from "@/utils/api";
import config from "@/utils/config";

export default {
  name: "alias",
  layout: 'base',
  data() {
    return {
      page: null
    }
  },
  methods: {
    goBack() {
      this.$router.go(-1);
    }
  },
  async asyncData({params, error}) {
    let alias = params.alias;
    let page = null;
    try {
      page = await api.getPage(alias);
    } catch (e) {
      error({code: 404, message: e});
    }

    return {page}
  },
  head() {
    return {
      title: this.page.title + '-' + config.site.name
    }
  }
}
</script>

<style scoped lang="less">
.scene {
  .page-header {
    padding: 10px;
  }
}
</style>
